/**
 * 获取react-router实例对象，在js中跳转页面
 */

import { useState, useEffect } from 'react'
// import { createBrowserHistory, createHashHistory } from 'history'
import { createHashHistory } from 'history'
import { Router } from 'react-router-dom'

// 1. history
// export const history = createBrowserHistory();
// 2. hash
//== 创建路由实例对象 => 作用：js中使用跳转页面 ==
export const history = createHashHistory()
// 函数组件=> 路由的模式(hash | history) => 作用：包裹根组件
export const HistoryRouter = ({ history, children }) => {

  const [state, setState] = useState({
    action: history.action,
    location: history.location
  })

  // useLayoutEffect
  useEffect(() => {
    history.listen(setState)
  }, [history])

  return <Router children={children} navigator={history} {...state} />
}